<template>
  <div class="cart">
    <table>
      <tHead>
        <tr>
          <td>
            <input
              type="checkbox"
              v-model="stateAll"
              @click="allChecked()"
            />全选
          </td>
          <td>编号</td>
          <td>名称</td>
          <td>价格</td>
          <td>数量</td>
          <td>总价</td>
          <td>操作</td>
        </tr>
      </tHead>
      <tBody>
        <tr v-for="pro in list" :key="pro.id">
          <td>
            <input
              type="checkbox"
              v-model="pro.state"
              @click="onCheckSingle(pro.id)"
            />
          </td>
          <td>{{ pro.id }}</td>
          <td>{{ pro.name }}</td>
          <td>{{ pro.price }}</td>
          <td>
            <input
              type="text"
              value="-"
              @click="pro.num--"
              :disabled="pro.num == 0"
            />
            <input type="text" v-model="pro.num" />
            <input type="text" value="+" @click="pro.num++" />
          </td>
          <td>￥{{ pro.num * pro.price }}</td>
          <td @click="onDelPro(pro.id)">删除</td>
        </tr>
      </tBody>
    </table>

    <form action="####">
      编号：<input
        type="text"
        placeholder="请输入编号"
        v-model="book.id"
      /><br />
      书名：<input
        type="text"
        placeholder="请输入名称"
        v-model="book.name"
      /><br />
      价格：<input
        type="text"
        placeholder="请输入价格"
        v-model="book.price"
      /><br />
      数量：<input
        type="text"
        placeholder="请输入数量"
        v-model="book.num"
      /><br />
      <button @click="onAddProd()">添加</button>
    </form>

    <span>购物车总价:￥{{ total }}</span>
  </div>
</template>

<script>
export default {
  name: "cart",
  data() {
    return {
      list: [
        { id: 1001, name: "html", price: 78, num: 1, state: false },
        { id: 1002, name: "vue", price: 88, num: 2, state: false },
        { id: 1003, name: "react", price: 98, num: 3, state: false },
      ],
      stateAll: false, // false
      book: {
        id: "",
        name: "",
        price: "",
        num: "",
      },
    };
  },
  methods: {
    // 处理添加 book
    onAddProd() {
      console.log("dd");
      this.list.push(this.book);
      this.book = { id: "", name: "", price: "", num: "" };
    },
    // 处理删除 book
    onDelPro(id) {
      console.log("del");
      this.list = this.list.filter((item) => item.id !== id);
    },
    allChecked() {
      this.stateAll = !this.stateAll;
      this.list.forEach((item) => {
        item.state = this.stateAll;
      });
    },
    onCheckSingle(id) {
      const book = this.list.find((item) => item.id === id);
      book.state = !book.state;
      this.stateAll = this.list.every((item) => item.state === true);
    },
  },
  computed: {
    // 监听购物车总价变化
    total() {
      const sum = this.list.reduce(
        (pre, curr) => pre + (curr.state ? Number(curr.price * curr.num) : 0),
        0
      );
      return sum.toFixed(2);
    },
  },
};
</script>

<style scoped lang="less">
.cart {
  background: #fff;
  
  table {
    width: fit-content;
    margin: 20px auto;

    tBody {
      tr td:nth-child(7) {
        cursor: pointer;
      }

      input {
        width: 20px;
        outline: none;
        border: 0;
        cursor: pointer;
      }
    }

    tr,
    td {
      border: 1px solid #ccc;
      width: 100px;
      background: rgb(244, 244, 244);
      transition: background 0.7s;
      &:hover {
        background: rgb(226, 225, 225);
      }
    }
  }

  form {
    width: fit-content;
    margin: 20px auto;

    input {
      display: inline-block;
      width: 400px;
      margin: 5px 0px;
      outline: none;
      border: 1px solid #ccc;
      border-radius: 3px;
    }
  }
}
</style>
